<template>
	<view class="content">
		<view class="top">
			<text class="title">{{top}}</text>
		</view>
		<view class="input">
			<view class="input-center">
				专注时间
				<input type="number" :value="zz" @confirm="input1" @input="input1" class="myInput" />
			</view>
			<view class="input-center">
				休息时间
				<input type="number" :value="xx" @confirm="input2" @input="input2" class="myInput" />
			</view>
		</view>
		<view class="buttom">
			<text class="title" @click="test">{{buttom}}</text>
		</view>
		<view class="fool">
			<button type="default" @click="play">{{mt}}</button>
			<button type="default" @click="start">开始计时</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: '00:00',
				buttom: '00:00',
				mt: '播放音乐',
				zz: 45,
				xx: 10,
				audioAction: {
					method: 'play'
				},
				innerAudioContext: null,
				music1: '../../static/music.mp4',
				music2: '../../static/1.mp3',
				isPlay: false,
				interval: false,
				sd: false,
				dd: false,
				mySetInterval: {},
			}
		},
		onLoad() {
			let than = this;
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = false;
			// this.innerAudioContext.seek	 = 0;
			this.innerAudioContext.src = this.music1;
			this.innerAudioContext.onPlay(() => {
				this.mt = '暂停音乐';
				this.isPlay = true;
			});
			this.innerAudioContext.onPause(() => {
				this.mt = '播放音乐';
				this.isPlay = false;
			});
			this.innerAudioContext.onError((res) => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
		},
		methods: {
			play() {
				this.isPlay && this.innerAudioContext.pause();
				this.isPlay || this.innerAudioContext.play();
			},
			input1(value) {
				this.zz = Number(value.detail.value);
			},
			input2(value) {
				this.xx = Number(value.detail.value);
			},
			start() {
				this.buttom = "00:00";
				this.interval && this.clearInterval(this.interval);
				let ff = this.zz - 1;
				let mm = 59;
				let than = this;
				this.interval = this.setInterval(() => {
					than.top = (ff > 9 && ff || '0' + ff) + ':' + ((mm > 9 && mm || '0' + mm));
					mm--;
					if (mm == 0 && ff == 0) {
						than.interval && than.clearInterval(than.interval);
						than.interval = null;
						than.innerAudioContext.src = than.music1;
						than.innerAudioContext.play();
						than.vibrateLong();
						setTimeout(() => {
							than.innerAudioContext.pause();
							than.innerAudioContext.seek = 0
							than.done();
						}, 30000);
						than.sd && than.clearInterval(than.sd);
						than.sd = null;
						than.sd = than.setInterval(() => {
							than.buttom = (ff > 9 && ff || '0' + ff) + ':' + ((mm > 9 && mm || '0' +
								mm));
							mm++;
							mm == 60 && (ff++, mm = 0);
							than.sd || (than.buttom = '00:00');
						}, 1000);
					}
					mm == -1 && (ff--, mm = 59)
				}, 1000);
			},
			done() {
				let ff = this.xx * 60;
				let ss = 0;
				let than = this;
				this.dd && this.clearInterval(this.dd);
				this.dd = this.setInterval(() => {
					if (ss >= ff) {
						than.clearInterval(than.dd);
						than.dd = null;
						than.innerAudioContext.src = than.music2;
						than.innerAudioContext.play();
						than.vibrateLong();
						setTimeout(() => {
							than.sd && than.clearInterval(than.sd);
							than.sd = null;
							than.innerAudioContext.pause();
							than.innerAudioContext.seek = 0
							than.start();
						}, 30000)
					}
					ss++;
				}, 1000);
			},
			setInterval(fn, delaysec, target = null) {
				let than = this;
				if (!target) {
					let tem = this.genRandomStr();
					this.mySetInterval[tem] = true;
					target = tem;
				}
				setTimeout(() => {
					fn.bind(than)();
					if (than.mySetInterval[target]) than.setInterval(fn, delaysec, target);
				}, delaysec)
				return target;
			},
			clearInterval(target) {
				if (this.mySetInterval[target]) {
					this.mySetInterval[target] = false;
					delete this.mySetInterval[target];
				}
			},
			vibrateLong() { // 震动
				// let time = 10000;
				// let num = 0;
				// let than = this;
				// let vv = null;
				// vv = than.setInterval(() => {
				// 	uni.vibrateLong({
				// 		success: function() {}
				// 	});
				// 	num += 1000;
				// 	if (num >= time) than.clearInterval(vv);
				// }, 1000);

				uni.vibrateLong({
					success: function() {}
				});
				setTimeout(() => {
					uni.vibrateLong({
						success: function() {}
					});
				}, 10000)
			},
			genRandomStr(len = 3) {
				let result = '';
				for (let i = 0; i < len; ++i) {
					result += Math.random().toString(36).substr(2)
				}
				return result.substr(0, len);
			},
			test(){
				console.log('=')
			}
		}
	}
</script>

<style>
	.content {
		widows: 100%;
		height: 100vh;
		background-color: #666699;
	}

	.input {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: fixed;
		top: 33%;
		left: 0;
		right: 0;
	}

	.input-center {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFF99;
	}

	.myInput {
		margin: 6vw;
		background-color: white;
		border-radius: 13rpx;
		padding: 35rpx;
		width: 48%;
		color: #000;
		font-size: 33rpx;
	}

	.title {
		color: #FFFF99;
		font-size: 155rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 28rpx;
	}

	.top {
		position: fixed;
		top: 10%;
		left: 0;
		right: 0;
	}

	.buttom {
		position: fixed;
		bottom: 20%;
		left: 0;
		right: 0;
	}

	.fool {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 3%;
		left: 0;
		right: 0;
	}
</style>
